<template>
  <div class="content" v-loading="loading">
    <!--头部-->
    <div class="header-setting">
      <a-breadcrumb class="breadcrumb">
        <a-breadcrumb-item>
          <a href="../main">首页</a>
        </a-breadcrumb-item>
        <a-breadcrumb-item>值班管理</a-breadcrumb-item>
        <a-breadcrumb-item>岗位管理</a-breadcrumb-item>
      </a-breadcrumb>
      <!--查询条件-->
      <div class="box-condition-body">
        <div class="box-condition-item">
          <div class="box-item">
            <div style="margin: 0 50px">在岗时间</div>
            <template>
              <div class="button_time">
                <a-button
                  type="primary"
                  @click="button_time(0)"
                  :style="computedStyle(0)"
                  >今天</a-button
                >
                <a-button
                  type="primary"
                  @click="button_time(1)"
                  :style="computedStyle(1)"
                  >昨天</a-button
                >
                <a-button
                  type="primary"
                  @click="button_time(2)"
                  :style="computedStyle(2)"
                  >本周</a-button
                >
                <a-button
                  type="primary"
                  @click="button_time(3)"
                  :style="computedStyle(3)"
                  >上周</a-button
                >
                <a-button
                  type="primary"
                  @click="button_time(4)"
                  :style="computedStyle(4)"
                  >本月</a-button
                >
              </div>
            </template>
            <template>
              <div style="margin: auto 50px">
                <a-range-picker
                  :showTime="{ format: 'HH:mm' }"
                  format="YYYY-MM-DD HH:mm"
                  :placeholder="['开始时间', '结束时间']"
                  @ok="onOk"
                  @change="onChange"
                  :value="rangePicker()"
                />
              </div>
            </template>
          </div>
        </div>
        <div class="box-condition-item">
          <div style="margin: 0 50px">停车点</div>
          <template>
            <a-select
              showSearch
              placeholder="选择停车点"
              optionFilterProp="children"
              style="width: 200px"
              :allowClear="allowClear"
              @select="selectPark"
              @change="selectParkChange"
            >
              <a-select-option v-for="p in parks" :key="p.id" :value="p.id"
                >{{ p.parkName }}
              </a-select-option>
            </a-select>
          </template>
          <template>
            <div style="margin: 0 50px">巡查员</div>
            <a-input
              style="margin: 0 100px 0 0px; width: 200px"
              v-model="inputNickName"
              @change="delayedTime"
              placeholder="巡查员"
            />
          </template>
        </div>
      </div>
    </div>

    <div class="box-form">
      <!--工具栏-->
      <div class="box-tool">
        <div></div>
        <div style="display: flex">
          <a-button
            type="primary"
            @click="buttonDownloadDataClick"
            icon="download"
            >导出</a-button
          >
          <a-button type="primary" @click="buttonSignBack">强制签退</a-button>
        </div>
      </div>

      <!--数据表格-->
      <div class="box-table">
        <a-table
          :columns="columns"
          :dataSource="dataSource"
          :pagination="pagination"
          bordered
          size="small"
          :scroll="scroll"
          :customRow="customRow"
          :rowClassName="setRowClassName"
          @change="tableChange"
        >
          <template slot="logOutTypeSlot" slot-scope="text">
            <template v-if="text == 0">
              <div>在岗中</div>
            </template>
            <template v-else-if="text == 1">
              <div>正常签退</div>
            </template>
            <template v-else-if="text == 2">
              <div>强制签退</div>
            </template>
            <template v-else-if="text == 3">
              <div>未签退</div>
            </template>
            <template v-else>
              <div>未知</div>
            </template>
          </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import CommonApi from "../../api/CommonApi";
import PostManangeApi from "../../api/ouduty/PostManange";
// import Constant from '../../utils/Constant';
// import Qs from 'qs';

const columns = [
  {
    title: "序号",
    dataIndex: "no",
    width: "5%",
  },
  {
    title: "巡查员",
    dataIndex: "nickName",
    width: "10%",
  },
  {
    title: "停车点",
    dataIndex: "parkName",
    width: "10%",
  },
  // {
  //     title: "地址"
  //     , dataIndex: "3"
  //     , width: '10%'
  // },
  // {
  //     title: "应收"
  //     , dataIndex: "4"
  //     , width: '10%'
  // },
  // {
  //     title: "实收"
  //     , dataIndex: "5"
  //     , width: '10%'
  // },
  // {
  //     title: "未收"
  //     , dataIndex: "6"
  //     , width: '10%'
  // },
  {
    title: "欠费补缴款金额",
    dataIndex: "paymentInArrears",
    width: "10%",
  },
  {
    title: "到岗时间",
    dataIndex: "startTime",
    width: "10%",
  },
  {
    title: "离岗时间",
    dataIndex: "endTime",
    width: "10%",
  },
  {
    title: "签退类型",
    dataIndex: "logOutType",
    scopedSlots: { customRender: "logOutTypeSlot" },
    width: "10%",
  },
  {
    title: "在岗时长",
    dataIndex: "workDuration",
    width: "10%",
  },
];
const dataSource = [];
const queryCondition = {
  limit: "100",
  curr: "1",
  nickName: "",
  parkId: "",
  signTimeStart: "",
  signTimeEnd: "",
  timeScreenCondition: "6",
  startTimeStamp: "",
  endTimeStamp: "",
};
export default {
  name: "PostManange",
  /*数据层*/
  data() {
    return {
      /**表格**/
      columns: columns,
      dataSource: dataSource,
      /*分页插件*/
      pagination: {
        showTotal: (total) => `共${total}条`,
        total: 0,
        current: 1,
        defaultCurrent: 1,
        showQuickJumper: true,
        defaultPageSize: 100,
      },
      /*表格固定头部*/
      scroll: {
        y: 550,
      },
      tableState: {
        rowId: -1,
      },
      /*当前选中的行数据*/
      currRowData: "",
      /**下拉框**/
      /*停车点下拉框*/
      parks: [],
      selectParkId: "",
      allowClear: true,
      /**按钮**/
      /*在岗时间按钮*/
      selectId: -1,
      /**日期控件**/
      /*收费时间日期*/
      momentArr: [],
      /**文本框**/
      inputNickName: "",
      /**others**/
      queryCondition,

      loading: false,
      timer: null,
    };
  },
  /*方法层*/
  methods: {
    /**组件部分相关方法**/
    /**表格**/
    tableChange(page) {
      this.queryCondition.curr = page.current;
      this.queryData();
    },

    customRow(record) {
      return {
        on: {
          // 事件
          click: () => {
            this.currRowData = record;
            this.tableState.rowId = record.id;
          }, // 点击行
        },
      };
    },

    clearSelect() {
      this.currRowData = "";
      this.tableState.rowId = "";
    },

    setRowClassName(record) {
      return record.id === this.tableState.rowId ? "clickRowStyl" : "";
    },

    /**按钮以及日期控件**/
    button_time(e) {
      this.selectId = e;
      let momentStart;
      let momentEnd;
      switch (e) {
        case 0:
          momentStart = moment().startOf("day");
          momentEnd = moment().endOf("day");
          break;
        case 1:
          momentStart = moment().add("day", -1).startOf("day");
          momentEnd = moment().add("day", -1).endOf("day");
          break;
        case 2:
          momentStart = moment().week(moment().week()).startOf("week");
          momentEnd = moment().week(moment().week()).endOf("week");
          break;

        case 3:
          momentStart = moment()
            .week(moment().week() - 1)
            .startOf("week");
          momentEnd = moment()
            .week(moment().week() - 1)
            .endOf("week");
          break;
        case 4:
          momentStart = moment().month(moment().month()).startOf("month");
          momentEnd = moment().month(moment().month()).endOf("month");
          break;
        default:
          break;
      }
      this.momentArr[0] = momentStart;
      this.momentArr[1] = momentEnd;
      this.queryData();
    },

    /*日期选择*/
    onChange(dates) {
      this.selectId = -1;
      this.momentArr = dates;
    },

    onOk(value) {
      this.selectId = -1;
      this.momentArr = value;
      this.queryData();
    },

    rangePicker() {
      return this.momentArr;
    },

    /**下拉框**/
    /*停车点*/
    initParks() {
      CommonApi.getParkList()
        .then((data) => {
          this.parks = data.data;
        })
        .catch((err) => {
          console.log("获取停车点列表数据异常！:", err);
        });
    },

    selectPark(value) {
      this.selectParkId = value;
      this.queryData();
    },

    selectParkChange(value) {
      if (value == undefined || value == "") {
        this.selectParkId = "";
        this.queryData();
      }
    },

    /**操作相关(crud)**/
    queryData() {
      this.loading = true;
      this.clearSelect();

      let condition = this.getQueryCondition();

      PostManangeApi.getAttendanceRecordList(condition)
        .then((data) => {
          let { list, pageNum, pageSize, total } = data.data;
          let array = list || [];
          array = array.map((item, index) => {
            return { ...item, no: total - (pageNum - 1) * pageSize - index };
          });
          this.dataSource = array;
          this.pagination.total = total;
          this.pagination.current = pageNum;
          this.loading = false;
        })
        .catch((err) => {
          console.log("获取考勤数据列表异常！", err);
          this.loading = false;
        });
    },

    getQueryCondition() {
      let condition = this.queryCondition;
      let startTimeStamp = "";
      let endTimeStamp = "";
      condition.nickName = this.inputNickName || "";
      condition.parkId = this.selectParkId || "";
      if (this.momentArr != undefined && this.momentArr.length != 0) {
        condition.timeScreenCondition = "6";
        startTimeStamp = new Date(this.momentArr[0]).getTime() / 1000;
        endTimeStamp = new Date(this.momentArr[1]).getTime() / 1000;
      } else {
        condition.timeScreenCondition = "0";
      }
      condition.startTimeStamp = startTimeStamp;
      condition.endTimeStamp = endTimeStamp;
      return condition;
    },

    buttonSignBack() {
      if (!this.currRowData) {
        this.$message.error("请先选择一项");
        return;
      }
      let { id } = this.currRowData;
      PostManangeApi.forceSignBack({ attendanceRecordId: id })
        .then(() => {
          this.queryData();
          this.$message.info("签退成功");
        })
        .catch(() => {
          this.$message.error("签退失败");
        });
    },

    buttonDownloadDataClick() {
      let condition = this.getQueryCondition();
      PostManangeApi.attendanceRecordExcel(condition)
        .then((res) => {
          const link = document.createElement("a");
          const blob = new Blob([res.data], {
            type: "application/vnd.ms-excel",
          });
          let fileName = decodeURIComponent(res.headers.filename);

          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          link.setAttribute("download", `${fileName}`);
          link.click();
        })
        .catch((err) => {
          let data = err.data;
          if (data) {
            return this.$message.warn(data);
          }
        });
    },
    delayedTime() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(this.queryData, 800);
    },
  },
  /*计算层*/
  computed: {
    computedStyle() {
      return function (selectId) {
        return this.selectId == selectId ? "" : "";
      };
    },
  },
  /*渲染层*/
  mounted() {
    this.initParks();
    this.queryData();
  },
};
</script>

<style scoped>
.content {
  width: 100%;
  height: 100%;
}

.header-setting {
  width: 100%;
  height: 174px;
  background: #fff;
}

.header-setting .breadcrumb {
  margin-left: 41px;
  padding-top: 15px;
}

/*表格行选中背景颜色*/
.clickRowStyl {
  background-color: #c1e0fd;
}

.box-condition-item {
  display: flex;
  align-items: center;
  min-width: 1500px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 5px 0;
}

.box-condition-item .box-item {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 5px 20px 5px;
}

.button_time button {
  margin-left: 10px;
}

/* 表单 */
.box-form {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 705px;
  background: #fff;
  margin-top: 8px;
}

.box-form .box-tool {
  padding-top: 11px;
  margin: 8px 0;
  width: 100%;
  /* flex */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.box-tool button {
  margin-right: 10px;
}
</style>
